import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false  // 关闭 vue 的生产提示

/*
    关于不同版本的Vue：
      1. vue.js 与 vue.runtime.xxx.js 的区别
          （1） vue.js 是完整的 Vue，包含：核心功能+模板解析器
          （2） vue.tuntime.xxx.js 是运行版的 Vue， 只包含：核心功能；没有模板解析器
    
      2，因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用
          render 函数接受到 createElement 函数去指定具体内容
*/

// 创建 Vue 实例对象 --- vm
// 方式一：
// new Vue({
//   //render函数完成了这个功能：将App组件放入容器中
//   render: h => h(App),
// }).$mount('#app')


// ### 初始化阶段：准备响应式数据，进行数据的响应式处理，经过创建阶段，该数据就变为了响应式数据。
// * beforeCreate：创建之前；    
// 更新阶段：与页面进行交互的时候，进行数据的修改和视图的更新，不同于初始化阶段和挂载阶段，这个阶段会进入到一个循环，进行反复的修改和更新。

// * created：创建之后
// 可以通过Vm访问到data当中的数据、methods当中配置的方法，发送初始化渲染的请求。
// 注：在创建阶段结束后，vue开始解析模板，生成虚拟的Dom（内存当中），但页面还不能显示出来解析好的内容。
// DOM（document object model文档对象模型，选中html标签，进行操作或获取数值）

// ### 挂载阶段：webpack打包，挂载，简而言之就是渲染模板的阶段，在页面当中可以看到我们所编写的相应结构
// * beforeMount：挂载之前；    
// 此时页面呈现的是未经Vue编译的Dom结构，所有对Dom的操作最终都是不奏效的，可以在这里做初始数据的获取
// * mounted：挂载之后
//   在beforeMount-mounted阶段会将内存中的虚拟DOM转为真实的DOM插入页面。
//   此时页面会显示经过Vue编译的DOM，对DOM的操作均有效，至此初始化过程结束。
//   一般会在此进行开始定时器、绑定自定义的事件等初始化操作
// 注：用了Vue就尽量少操作Dom


/**
 * 一般来说用created的比较多，created是在渲染之前进行调用，通常先初始化属性，然后再做渲染；
 * mounted是在模板渲染完成后，一般都是初始化页面之后，再对元素节点进行操作，在这里请求数据就可能会出现不规则闪动问题。
 * 在请求数据的数据对DOM有影响就用created；请求数据与DOM无关用mounted。
 * 注：在运行周期函数的时候，一般情况下只会进行初始化阶段和挂载阶段
*/


// ### 更新阶段：与页面进行交互的时候，进行数据的修改和视图的更新，不同于初始化阶段和挂载阶段，这个阶段会进入到一个循环，进行反复的修改和更新。
// * beforeUpdate：更新之前； 
//   与页面进行交互，修改数据的时候进行触发，此时数据是新的，但是页面是旧的，即：页面还没有和数据保持同步
// * updated：更新之后
//   根据新数据，生成新的虚拟DOM，随后与旧的DOM进行比较，最终完成了页面的更新，数据进行了修改，并且视图也进行了更新。即：页面与数据保持了同步


// ### 销毁阶段：进行实例的销毁，不用的组件进行释放
// * beforeDestroy：销毁之前；
//   VM中的所有指令都处于可用状态，马上要执行销毁过程，一般在此阶段，释放vue以外的资源，例如关闭定时器等收尾操作
// * destroyed：销毁之后
//   所有的事件监听，所有跟vue相关的绑定，全部都进行了销毁，相当于这个DOM的结构跟Vue无关了


// 方式二：
new Vue({
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),
	// render:q=> q('h1','你好啊')

	// template:`<h1>你好啊</h1>`,
	// components:{App},
})